const { defineConfig } = require('@vue/cli-service')
const { VUE_APP_BASE_URL_PREFIX, VUE_APP_BASE_URL } = process.env
// element-plus 按需导入
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
// 引入node path模块
const { resolve, join } = require('path')
const pathResolve = (path) => {
  return resolve(__dirname, path)
}
const pathJoin = (path) => {
  return join(__dirname, path)
}

// https://cli.vuejs.org/zh/config/
module.exports = defineConfig({
  publicPath: './', // 默认的'/'是绝对路径，这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径
  outputDir: 'dist', // 打包输出文件目录
  assetsDir: 'assets', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  indexPath: 'index.html', // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
  filenameHashing: true, // 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。
  lintOnSave: process.env.NODE_ENV === 'development', // 在生产构建时禁用 eslint-loader。 设置为 true 或 'warning' 时，eslint-loader 会将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败。
  runtimeCompiler: false, // 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。
  transpileDependencies: false, // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。你可以启用本选项，以避免构建后的代码中出现未转译的第三方依赖。不过，对所有的依赖都进行转译可能会降低构建速度。
  productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
  // webpack相关配置 https://cli.vuejs.org/zh/guide/webpack.html
  configureWebpack: {
    // 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。如果这个值是一个函数，则会接收被解析的配置作为参数。
    resolve: {
      alias: {
        '@': pathResolve('src'), // 把 @ 符号映射到 src 文件夹
        src: pathResolve('src'), // 把 src 映射到 src 文件夹
        views: pathResolve('src/views'), // 把 views 映射到 src/views 文件夹
        components: pathResolve('src/components'), // 把 components 映射到 src/components 文件夹
        assets: pathResolve('src/assets'), // 把 assets 映射到 src/assets 文件夹
        images: pathResolve('src/assets/images') // 把 images 映射到 src/assets/images 文件夹
      },
      extensions: ['.js', '.jsx', '.json', '.ts', '.tsx', '.vue'] // 使用路径别名时想要省略的后缀名，可以自己增减
    },
    plugins: [
      // element-plus 插件自动导入
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ]
  },
  // https://cli.vuejs.org/zh/guide/webpack.html#链式操作-高级
  chainWebpack: (config) => {
    // 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
    // config.plugins.delete('prefetch') // 删除预加载
    // 配置文件路径别名
    // config.resolve.alias.set('@', pathResolve('src')) // 把 @ 符号映射到 src 文件夹
    // 配置 svg-sprite-loader
    config.module.rule('svg').exclude.add(resolve('src/assets/icons')).end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'svg-[name]' // 设置链接名
      })
      .end()
    // 去除vue-i18n tree-shaking警告 You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.
    config.resolve.alias.set('vue-i18n', 'vue-i18n/dist/vue-i18n.cjs.js')
  },
  // css相关配置 https://cli.vuejs.org/zh/guide/css.html
  css: {
    extract: process.env.NODE_ENV === 'production', // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。 Default: 生产环境下是 true，开发环境下是 false
    sourceMap: false // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能。
    // loaderOptions: {} // 向 CSS 相关的 loader 传递选项
  },
  // webpack-dev-server 相关配置 https://webpack.js.org/configuration/dev-server/
  devServer: {
    /* 有些值像 host、port 和 https 可能会被命令行参数覆写。
  有些值像 publicPath 和 historyApiFallback 不应该被修改，因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。 */
    host: '0.0.0.0', // 默认是 localhost。如果你希望服务器外部可访问，指定如下 host: '0.0.0.0'，设置之后之后可以访问ip地址
    port: 80,
    // open: false, // open 在devServer启动且第一次构建完成时，自动用我们的系统的默认浏览器去打开要开发的网页
    // hot: true, // hot配置是否启用模块的热替换功能，devServer的默认行为是在发现源代码被变更后，通过自动刷新整个页面来做到事实预览，开启hot后，将在不刷新整个页面的情况下通过新模块替换老模块来做到实时预览。
    // https: false, // https协议
    // disableHostCheck: true, // 关闭头部校验
    // hotOnly: false, // hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下，前者会自动刷新页面，后者不会刷新页面，而是在控制台输出热更新失败
    /* historyApiFallback: { // 解决vue mode:history 启动之后出现刷新页面 cannot GET /问题 或者 后端可以通过node中间件、nginx配置处理
      index: '/index.html'
    }, */
    proxy: {
      // 设置代理
      /* '/api': {
        target: process.env.VUE_APP_BASE_URL, // 接口请求的地址
        secure: false, // false为http访问，true为https访问
        changeOrigin: true, // 是否跨域
        ws: true, // websocket支持
        pathRewrite: {
          '^/api': '' // 路径重写
        }
      } */
      VUE_APP_BASE_URL_PREFIX: {
        target: VUE_APP_BASE_URL, // 接口请求的地址
        secure: false, // false为http访问，true为https访问
        changeOrigin: true, // 是否跨域
        ws: false, // websocket支持
        pathRewrite: {
          [`^${VUE_APP_BASE_URL_PREFIX}`]: '' // 路径重写
        }
      }
    }
  },
  // 第三方插件配置 这是一个不进行任何 schema 验证的对象，因此它可以用来传递任何第三方插件选项
  pluginOptions: {
    'style-resources-loader': {
      // CSS预处理器自动化导入
      preProcessor: 'scss',
      patterns: [
        pathJoin('./src/assets/styles/mixin.scss') // 从该目录起的相对目录
      ]
    }
  }
})
